import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
import 'logic.dart';
import 'package:get/get.dart';

///@author:create by BZY
///Date: 2021/8/3 14:12
///Description: 查看图片页面,可以查看图片列表
class CheckPhotoPage extends GetView<CheckPhotoLogic> {
  final CheckPhotoLogic logic = Get.put(CheckPhotoLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black54,
      body: Stack(
        children: [
          PhotoViewGallery.builder(
            pageController: PageController(initialPage: controller.initPage),
            itemCount: controller.photoList.length,
            builder: _photoBuilder,
            onPageChanged: (index) => controller.pageChange(index),
            scrollPhysics: const BouncingScrollPhysics(),
            loadingBuilder: (context, event) {
              if (event == null) {
                return const Center(
                  child: Text('Loading'),
                );
              }

              final value = event.cumulativeBytesLoaded /
                  (event.expectedTotalBytes ?? event.cumulativeBytesLoaded);

              final percentage = (100 * value).floor();
              return Center(
                child: Text('$percentage%'),
              );
            },
          ),
          IconButton(
              icon: const Icon(
                Icons.arrow_back,
                color: Colors.white,
              ),
              onPressed: () => controller.onBack()).marginOnly(top: 20),
          Align(
            alignment: Alignment.bottomCenter,
            child: GetBuilder<CheckPhotoLogic>(
              id: 'index',
              init: controller,
              builder: (controller) {
                return Container(
                  child: Text(
                    '${controller.currentPage}/${controller.photoList.length}',
                    style: const TextStyle(color: Colors.white, fontSize: 16),
                  ),
                ).marginOnly(bottom: 24);
              },
            ),
          )
        ],
      ),
    );
  }

  PhotoViewGalleryPageOptions _photoBuilder(context, index) {
    return PhotoViewGalleryPageOptions(
        onTapUp: (context, data, value) => controller.onBack(),
        initialScale: PhotoViewComputedScale.contained,
        minScale: PhotoViewComputedScale.contained * 0.8,
        maxScale: PhotoViewComputedScale.contained * 4,
        heroAttributes:
        PhotoViewHeroAttributes(tag: controller.photoList[index]),
        imageProvider: NetworkImage(controller.photoList[index]));
  }
}
